<script setup>
import TeamTagList from "../components/TeamTagList.vue";
import { ref, reactive, onMounted } from "vue";
import { Toast } from "vant";
import { teamPageQueryUser } from "../services/pageQuery/TeamPageQuery.js";
import { getCurrentUser } from '../services/user.js'
let teamList = ref([]);
// 查询我加入的队伍，flag设置为1
let param = reactive({
    searchText: "",
    description: "",
    maxNum: null,
    name: "",
    pageNum: 1,
    pageSize: 4,
    status: null,
    flag: 1,
});
let total = ref();
const user = ref({});

const onSearch = async (searchText) => {
    // 这里也要发请求
    [teamList.value, total.value] = await teamPageQueryUser(param);
};
const onCancel = () => (param.searchText = "");
onMounted(async () => {
    // 这里要发请求
    [teamList.value, total.value] = await teamPageQueryUser(param);
    user.value = await getCurrentUser();
});
</script>
<template>
    <div id="tagList">
        <!-- 搜索栏 -->
        <form action="/">
            <van-search
                v-model="param.searchText"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
        <TeamTagList :teamList="teamList" :currentUserId="user.id"></TeamTagList>
        <van-pagination
            @change="onSearch"
            v-if="teamList && teamList.length >= 1"
            v-model="param.pageNum"
            :total-items="total"
            :show-page-size="3"
            :items-per-page="param.pageSize"
            force-ellipses
        />
    </div>
</template>

<style scoped>
    #tagList {
        margin-bottom: 50px;
    }
</style>
